<template>      
<div>
    <div class="newslistContainer">
        <!-- 轮播图 -->
        <div class="bannerBlock">
    <el-carousel>
      <el-carousel-item v-for="item in lunbotulist" :key="item.id" tag="el-carousel-item">
          <router-link :to="'newsinfo/' + item.id" target='_blank'>
        <h3 class="small">
          <img :src="item.url" alt="" style="width:100%;">
        </h3>
        </router-link>
      </el-carousel-item>
    </el-carousel>
    <div class="importangNews">
    <div class="importangNews_header">
      <span>要闻</span>
      <span>北京时间：12点6分</span>
    </div>
    <div class="importangNews_body">
      <div class="importangNews_item" v-for="item in importantNewsList" :key="item.title">
        <a :href="item.linkUrl">{{item.Title}}</a>
        <span>[{{item.profile}}]</span>
      </div>
    </div>
    </div>
  </div>
  <!-- 新闻类选选择 -->
    <div class="newsTag">
      <ul>
        <li>主页</li>
        <li>实时新闻</li>
        <li>人车新闻</li>
        <li>贫困地区新闻</li>
        <li>体育新闻</li>
        <li>小道新闻</li>
      </ul>
    </div>

        <div>
  <div class="list-unstyled">
    <div v-for="item in newslist" :key="item.id" @click="goDetail(item.link_url)" class="acticleItem">
        <div class="acticleContainer">
            <img src="" alt="">
            <div class="acticleBody">
              <h4>{{item.title}}</h4>
              <div>
                <div class="acticleZhaiyao">
                  {{item.zhaiyao}}
                </div>
                <span class="timeAndclick">
                    <span>{{item.add_time | dataFormat}}</span>
                    <span>点击：{{item.click}}次</span>
                </span>
            </div>
          </div>
      </div>
      <hr>
    </div>
  </div>
</div>
    <!-- 分页组件 -->
    <div class="pagenation">
  <!-- <span class="demonstration">页数较少时的效果</span> -->
  <el-pagination
     background
    layout="sizes,prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :total="totalCount"
    :current-page.sync="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    >
  </el-pagination>
  </div>
  </div>
</div>
</template>
<script>
export default {
    data(){
        return{
            newslist:[
                {id:1,title:'张静初：从演技派女神到女版陈冠希；从演员的骄傲到男导演收割机',add_time:new Date(),
                zhaiyao:'1月10日就是上个周末，张静初出席了“国潮盛典”，她穿着一身蓝色的衬衣裙仿佛出水芙蓉一般，妩媚的v领造型，不经意间展现的就是让人最心动的美丽。 ..',
                click:1,img_url:'',link_url:''},
                {id:2,title:'汕尾这几个贫困县鲜为人知',add_time:new Date(),zhaiyao:'123',click:1,img_url:'',link_url:''},
                {id:3,title:'汕尾这几个贫困县鲜为人知',add_time:new Date(),zhaiyao:'123',click:1,img_url:'',link_url:''},
                {id:4,title:'汕尾这几个贫困县鲜为人知',add_time:new Date(),zhaiyao:'123',click:1,img_url:'',link_url:''},
                {id:5,title:'汕尾这几个贫困县鲜为人知',add_time:new Date(),zhaiyao:123,click:1,img_url:'',link_url:''},
            ],
            lunbotulist:[
              {id:1,url:'https://n.sinaimg.cn/news/transform/579/w340h239/20200313/2372-iquxruh9570452.jpg',jianjie:"国家助贫中心：汕尾这几个贫困县鲜为人知"},
              {id:2,url:'https://n.sinaimg.cn/mil/transform/579/w340h239/20200313/4f8b-iquxruh8401475.png',jianjie:"国家助贫中心：广州这几个贫困县鲜为人知"},
              {id:3,url:'https://n.sinaimg.cn/news/transform/579/w340h239/20200313/7de6-iquxruh9849736.jpg',jianjie:"国家助贫中心：汕尾这几个贫困县鲜为人知"},
            ],
            importantNewsList:[
              {Title:'习近平向鲁哈尼 马塔雷拉致慰问电',profile:'北京时间12点60分，习近平在京向鲁哈尼和马塔雷拉致慰问电...',linkUrl:''},
              {Title:'实时更新：新型冠状病毒肺炎全国疫情地图',profile:'目前，武汉市新增人数明显减低，其他各省三日未增...',linkUrl:''},
              {Title:'为感谢中国 意大利第二报做出特别之举',profile:'意大利人为啥不带口罩？回答扎心 中国援助抵达 使馆脸书被刷...',linkUrl:''},
              {Title:'特朗普做出这一决定后 美媒：大事将至',profile:'特朗普晚宴宾客中又一人确诊 特朗普称很有可能将接受检...',linkUrl:''},
              {Title:'习近平向鲁哈尼 马塔雷拉致慰问电',profile:'北京时间12点60分，习近平在京向鲁哈尼和马塔雷拉致慰问电...',linkUrl:''},
            ],
            //分页ui的当前页数
            currentPage:1,
            //每页显示条目个数
            pageSize:6,
            pageSizes:[6, 8, 10, 20],
            //总条目数,必须得写
            totalCount:100,
        }
    },
    //在生命周期创建中调用请求数据方法
      created() {
          this.getNewsList(this.currentPage,this.pageSize)
      },
    methods: {
        getNewsList(currentPage,pageSize){
          this.$http.get('/news/menu/'+currentPage+'/'+pageSize).then(res=>{
            if(res.status!=200) return this.$message('请求数据失败')
            this.newslist=[]
            for(var i=0;i<res.data['length'];i++){
                        var p = {"id":i,"title":res.data['name'][i],"zhaiyao":res.data['zhaiyao'][i],
                            "click":res.data['count'][i], "author":res.data['author'][i],
                            "add_time":res.data['time'][i],"link_url":res.data['no'][i]
                        };
                        var _this = this
                        
                        _this.newslist.splice(i,1,p);

                    }
                    // window.console.log(this.newslist)
          })
          
        },
        //编程式路由
        goDetail(id){
          let routerJump = this.$router.resolve({path:'newsinfo/'+id})
          window.open(routerJump.href,'_blank')
        },
        // 分页c
        //  每页显示的条数
        handleSizeChange(val) {
            // 改变每页显示的条数 
            this.pageSize=val
            // 点击每页显示的条数时，显示第一页
            this.currentPage=1
            // 注意：在改变每页显示的条数时，要将页码显示到第一页
            this.getNewsList(this.currentPage,val)
            window.console.log(this.newslist)
            
        },
          // 显示第几页
        handleCurrentChange(val) {
            // 改变默认的页数
            this.currentPage=val
            // 切换页码时，要获取每页显示的条数
            this.getNewsList(val,this.pageSize)
        },
    },
    
}
</script>
<style scoped>
.newslistContainer{
    width: 950px;
    /* border: 1px solid red; */
    margin-left: 50%;
    padding: 5px 10px;
    transform: translateX(-50%);
    background-color: #fff;
  }
  /*  */
  .bannerBlock{
    display: flex;
    justify-content: space-evenly;
  }
  .el-carousel{
  width: 425px;
    }
  .importangNews{
    height: 300px;
    width: 350px;
    /* border: 1px solid red; */
  }
 .importangNews_header{
   display: flex;
   justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom:1px solid #7e7e7e;
    font-size: 12px;
 }
 .importangNews_header :first-child{
  font-weight: bold;
  font-size: 18px;
 }
 .importangNews_body{
   display: flex;
   flex-direction: column;
 }
 .importangNews_item{
   display: flex;
   flex-direction: column;
   text-align: center;
   font-size: 12px;
   color: #7f7f7f;
   margin-top: 8px;
 }
 .importangNews_item :first-child{
   font-size: 16px;
   color: black;
 }
 /*  */
.newsTag{
  margin-top: 10px;
  padding-top: 20px;
}
.newsTag ul{
  display: flex;
  justify-content: space-around;
  background-color: #999;
  padding: 5px;
}
.newsTag ul li{
  font-weight: bold;
  border-bottom: 2px solid #999;
  list-style: none;
  cursor: pointer;
}
.newsTag ul li:hover{
  border-bottom: 2px solid black;
}
/*  */
  .acticleContainer{
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    margin-bottom: 30px;
  }
  .acticleItem{cursor: pointer;}
  .acticleItem img{
    width: 190px;
    height: 110px;
    box-shadow: 0 1px 1px #999;
  }
  .acticleBody{
    width: 700px;

  }
  .acticleBody h4{
        color:black;
      font-size: 18px;
      font-weight: bold;
  }
  .acticleZhaiyao{
    height: 60px;
    font-size: 13px;
    color: #7f7f7f;
  }
.timeAndclick{
    font-size: 12px;
    color: #7f7f7f;
    display: flex;
    justify-content: space-between;
}
.pagenation{
  text-align: center;
}
</style>